<template>
  <div>
    <i class="el-icon-rank" @click="handler" />
  </div>
</template>

<script>
import screenfull from 'screenfull'
export default {
  name: 'ScreenFull',
  data() {
    return {}
  },
  computed: {},
  created() {},
  methods: {
    handler() {
      console.log(this, 999)
      /*
      webkit=====google
      moz========火狐
      ms=========ie
      o======= 欧朋
      */
      //  4.2.0
      screenfull.toggle()
    }
  }
}
</script>
<style lang="scss" scoped>
.el-icon-rank {
  color: #fff;
  font-size: 30px;
  line-height: 50px;
  transform: rotate(45deg);
  // animation:动画名，动画时间，动画延迟时间，动画曲线，动画次数
  // animation: ScreenFull 1s infinite;
}

// @keyframes ScreenFull {
//   // from {
//   // }
//   // to {
//   //   transform: rotate(360deg);
//   // }
//   from {
//   }
//   50% {
//     transform: rotate(360deg);
//   }
//   to {
//     transform: rotate(0deg);
//   }
// }
</style>
